<script setup lang="ts">
import {userService} from "../http/UserService";
import {UserOutlined} from "@ant-design/icons-vue";
import TheCommonTable from "../components/the-common-table.vue";
import {RoleQueryRendered, UserQueryRendered} from "../http/Model";
import {ref} from "vue";
import roleService from "../http/RoleService";
import {message} from "ant-design-vue";

// 列表列
const columns = [
  {
    title: '头像',
    dataIndex: 'avatar',
    key: 'avatar'
  }, {
    title: '用户名',
    dataIndex: 'username',
    key: 'username',
  }, {
    title: '昵称',
    dataIndex: 'nickname',
    key: 'nickname',
  }, {
    title: '操作',
    key: 'action'
  }
];

const editingForm: FormItem[] = [
  {
    label: '用户名',
    dataIndex: 'username',
    inputType: 'text'
  }, {
    label: '密码',
    dataIndex: 'password',
    inputType: 'password'
  }, {
    label: '头像',
    dataIndex: 'avatar',
    inputType: 'text'
  }, {
    label: '昵称',
    dataIndex: 'nickname',
    inputType: 'text'
  }, {
    label: '描述',
    dataIndex: 'description',
    inputType: 'text'
  }
]

// 角色列表编辑
const roleDataSource = ref<RoleQueryRendered>()
const roleColumns = [
  {
    title: '角色名',
    dataIndex: 'name',
    key: 'name'
  }, {
    title: '代码',
    dataIndex: 'code',
    key: 'code'
  }
]
const roleTableLoading = ref(false)
const roleModalVisible = ref(false)
const roleModalLoading = ref(false)
const editingUser = ref<UserQueryRendered>()

const selectedRowKeys = ref<string[]>([])
const rowSelection = ref({
  selectedRowKeys: selectedRowKeys,
  checkStrictly: false,
  onChange: (changeableRowKeys: (string | number)[], selectedRows: RoleQueryRendered[]) => {
    selectedRowKeys.value = selectedRows.map(role => role.code!)
  }
});

const refreshRoleTable = async (user: UserQueryRendered) => {
  roleDataSource.value = (await roleService.findAll()).data.data
  selectedRowKeys.value = (await userService.getRoles(user.username!)).data.data.map(role => role.code)
}

const editRoles = (user: UserQueryRendered) => {
  console.log(user)
  editingUser.value = user
  roleModalVisible.value = true
  refreshRoleTable(user)
}

const roleModalOkHandler = () => {
  roleModalLoading.value = true
  userService.replaceRoles(editingUser.value?.username!, selectedRowKeys.value).then(({data}) => {
    if (data.success) {
      message.success("更新角色列表成功")
      roleModalVisible.value = false
    } else {
      message.error(data.message)
    }
  }).finally(() => {
    roleModalLoading.value = false
  })
}
</script>

<template>
  <the-common-table editing-value-key-name="username" :has-pagination="true" :service="userService"
                    :columns="columns" :editing-form="editingForm">
    <!--自定义列-->
    <template #custom-columns="{column, record}">
      <template v-if="column.key==='avatar'">
        <a-avatar :src="record.avatar" shape="square" size="large">
          <template #icon>
            <UserOutlined/>
          </template>
        </a-avatar>
      </template>
    </template>
    <!--自定义操作-->
    <template #custom-action="{column, record}">
      <a-button @click="editRoles(record)">角色管理</a-button>
    </template>
  </the-common-table>
  <!--角色编辑弹窗-->
  <a-modal title="角色列表" cancel-text="取消" ok-text="确定"
           v-model:visible="roleModalVisible" v-model:confirm-loading="roleModalLoading"
           width="1000px" @ok="roleModalOkHandler">
    <a-table :columns="roleColumns" :data-source="roleDataSource" :loading="roleTableLoading"
             row-key="code" :row-selection="rowSelection" :pagination="false">
    </a-table>
  </a-modal>
</template>
